<template>
  <ContentWrap>
    <!-- 头部操作区域 -->
    <div class="header-section">
      <div class="page-title">
        <h2>关键词管理</h2>
        <p>管理系统中的关键词分支和属性</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" class="add-button" @click="openFrom('create')">
          <Icon icon="ep:plus" class="button-icon" />
          <span class="button-text">新增关键词</span>
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table :data="list" class="keyword-table" stripe>
        <el-table-column prop="branch" label="所属分支" min-width="120">
          <template #default="scope">
            <div class="branch-cell">
              <Icon icon="ep:folder" class="branch-icon" />
              <span class="branch-text">{{ scope.row.branch }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="keys" label="关键词" show-overflow-tooltip min-width="200">
          <template #default="scope">
            <el-tag
              v-for="(keyword, index) in scope.row.keys.split(',')"
              :key="index"
              class="keyword-tag"
              size="small"
              type="info"
            >
              {{ keyword.trim() }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="branchType" label="分支属性" min-width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="getBranchTypeColor(scope.row.branchType)"
              class="branch-type-tag"
              v-if="scope.row.branchType"
            >
              {{ branchAttribute[scope.row.branchType] }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                type="primary"
                link
                class="action-btn edit-btn"
                @click="openFrom('update', scope.row.id)"
              >
                <Icon icon="ep:edit" class="action-icon" />
                <span class="action-text">编辑</span>
              </el-button>
              <el-button
                type="danger"
                link
                class="action-btn delete-btn"
                v-if="scope.row.type != 1"
                @click="del(scope.row.id)"
              >
                <Icon icon="ep:delete" class="action-icon" />
                <span class="action-text">删除</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
        class="custom-pagination"
      />
    </div>
  </ContentWrap>

  <KeyWordFrom ref="keyWordRef" @success="getList" />
</template>

<script setup>
import * as defaultIvrKeywordApi from '@/api/call/manage'
import KeyWordFrom from './keywordFrom.vue'

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  flowId: 0
})

const branchAttribute = {
  1: '肯定',
  2: '否定',
  3: '拒绝',
  5: '默认'
}

// 获取分支类型颜色
const getBranchTypeColor = (type) => {
  const colorMap = {
    1: 'success',
    2: 'warning',
    3: 'danger',
    5: 'info'
  }
  return colorMap[type] || 'info'
}

const keyWordRef = ref(false)
const list = ref([])
const total = ref(0)

const getList = async () => {
  const data = await defaultIvrKeywordApi.getIvrKeywordPages(queryParams)
  list.value = data.list
  total.value = data.total
}

const openFrom = (type, id) => {
  keyWordRef.value.open(type, id)
}

const del = async (id) => {
  await ElMessageBox.confirm(`确定删除此条数据吗？`)
  await defaultIvrKeywordApi.deleteIvrKeywords(id)
  ElMessage.success('操作成功')
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
// 头部区域
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.page-title {
  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
  }

  p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
}

.add-button {
  height: 40px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  }

  .button-icon {
    margin-right: 6px;
    font-size: 16px;
  }
}

// 表格区域
.table-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.keyword-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
      padding: 16px 12px;
    }
  }

  :deep(.el-table__body) {
    tr {
      transition: all 0.2s ease;

      &:hover {
        background: #f8fafc !important;
      }

      td {
        padding: 16px 12px;
        border-bottom: 1px solid #f1f5f9;
      }
    }
  }
}

// 分支单元格
.branch-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.branch-icon {
  color: #6366f1;
  font-size: 16px;
}

.branch-text {
  font-weight: 500;
  color: #374151;
}

// 关键词单元格
.keywords-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.keyword-tag {
  border-radius: 6px;
  font-size: 12px;
  padding: 4px 8px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;

  &:hover {
    background: #e2e8f0;
  }
}

// 分支类型标签
.branch-type-tag {
  border-radius: 6px;
  font-weight: 500;
  padding: 6px 12px;
}

// 操作按钮
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;

  .action-icon {
    font-size: 14px;
  }

  &.edit-btn {
    &:hover {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
    }
  }

  &.delete-btn {
    &:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
  }
}

// 分页区域
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding: 20px;
}

.custom-pagination {
  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;

      &.is-active {
        background: #3b82f6;
        color: white;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
    }
  }
}

// H5 响应式设计
@media (max-width: 768px) {
  .header-section {
    flex-direction: column;
    gap: 16px;
    padding: 16px;

    .page-title {
      h2 {
        font-size: 20px;
      }
    }

    .header-actions {
      width: 100%;

      .add-button {
        width: 100%;
        justify-content: center;
      }
    }
  }

  .table-container {
    overflow-x: auto;

    .keyword-table {
      min-width: 600px;
    }
  }

  .keywords-cell {
    max-width: 150px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;

    .action-btn {
      .action-text {
        display: none;
      }
    }
  }
}

@media (max-width: 480px) {
  .header-section {
    padding: 12px;

    .page-title {
      h2 {
        font-size: 18px;
      }

      p {
        font-size: 13px;
      }
    }
  }

  .keyword-table {
    :deep(.el-table__header) {
      th {
        padding: 12px 8px;
        font-size: 13px;
      }
    }

    :deep(.el-table__body) {
      tr td {
        padding: 12px 8px;
      }
    }
  }

  .keyword-tag {
    font-size: 11px;
    padding: 2px 6px;
  }
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .header-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;

    .page-title {
      h2 {
        color: #f1f5f9;
      }

      p {
        color: #94a3b8;
      }
    }
  }

  .table-container {
    background: #1e293b;
    border-color: #334155;
  }

  .keyword-tag {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
  }
}
</style>
